<template>
    <a-form ref="formRef" layout="horizontal" auto-label-width :model="dataForm">
        <a-row :gutter="20" justify="space-between">
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="进度日期" field="columnDate" :rules="[{ required: true, message: '进度日期必填' }]"
                    :validate-trigger="['change', 'blur']">
                    <a-date-picker  popup-container="html"  class="aInput" v-model="dataForm.columnDate" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="计划单号" field="planAdd" :rules="[{ required: true, message: '计划单号必填' }]"
                    :validate-trigger="['change', 'blur']">
                    <a-input class="aInput" v-model="dataForm.planAdd" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="流转卡号" field="roamCard" :rules="[{ required: true, message: '流转卡号必填' }]"
                    :validate-trigger="['change', 'blur']">
                    <a-select popup-container="html"  style="width: 270px;" v-model="dataForm.roamCard" allow-clear allow-search
                        @search="searchHandler($event, 1)" @focus="selectAwait(1)" @change="changeCircul" ref="circulRef">
                        <a-option v-for="item in pageData.circulDropList" :key="item.id" :value="item.flowCardCode">{{
                            item.flowCardCode }}</a-option>
                    </a-select>
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="生产车间" field="worksho" :rules="[{ required: true, message: '生产车间必填' }]"
                    :validate-trigger="['change', 'blur']">
                    <a-input class="aInput" v-model="dataForm.worksho" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="进度类型">
                    <!-- <a-checkbox :value="1" :default-checked="dataForm.speedType !== 0 ? true : false"
                        @change="dataForm.speedType = $event ? 1 : 0" /> -->
                    <a-select popup-container="html"  style="width: 270px;" v-model="dataForm.speedType" allow-clear allow-search
                        @search="searchHandler($event, 4)" @focus="selectAwait(4)">
                        <a-option v-for="item in pageData.dupScheduleList" :key="item.id" :value="item.scheduleType">{{
                            item.scheduleType }}</a-option>
                    </a-select>
                </a-form-item>
            </a-col>
        </a-row>
        <a-row :gutter="20" justify="space-between">
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="客户名称">
                    <a-input class="aInput" v-model="dataForm.customerName" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="暂放时间(小时)" field="temporarys" :rules="[{ required: true, message: '暂放时间必填' }]"
                    :validate-trigger="['change', 'blur']">
                    <a-input style="width: 270px;" :disabled="true" v-model="dataForm.temporarys" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="色号">
                    <a-input class="aInput" v-model="dataForm.colourNumber" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="确认色">
                    <a-input class="aInput" v-model="dataForm.colorConfirmation" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="布号">
                    <a-input class="aInput" v-model="dataForm.clothNumber" />
                </a-form-item>
            </a-col>
        </a-row>
        <a-row :gutter="20" justify="space-between">
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="品名">
                    <a-input class="aInput" v-model="dataForm.tradeName" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="纱支">
                    <a-input class="aInput" v-model="dataForm.yarnCount" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="纱批">
                    <a-input class="aInput" v-model="dataForm.yarnNumber" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="坯布编号">
                    <a-input class="aInput" v-model="dataForm.grayCode" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="坯布名称">
                    <a-input class="aInput" v-model="dataForm.grayName" />
                </a-form-item>
            </a-col>
        </a-row>
        <a-row :gutter="20" justify="space-between">
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="对色资料">
                    <a-input class="aInput" v-model="dataForm.coloringMatch" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="复样加急">
                    <a-checkbox :value="1" :default-checked="dataForm.duplicateSample !== 0 ? true : false"
                        @change="dataForm.duplicateSample = $event ? 1 : 0" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="是否加急">
                    <a-checkbox :value="1" :default-checked="dataForm.urgent !== 0 ? true : false"
                        @change="dataForm.urgent = $event ? 1 : 0" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="复样说明" field="duplicateExplain" :rules="[{ required: true, message: '复样说明必填' }]"
                    :validate-trigger="['change', 'blur']">
                    <a-input class="aInput" v-model="dataForm.duplicateExplain" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="复样类型" field="checkerType" :rules="[{ required: true, message: '复样类型必填' }]"
                    :validate-trigger="['change', 'blur']">
                    <!-- <a-input class="aInput" v-model="dataForm.checkerType" /> -->
                    <a-select popup-container="html"  style="width: 270px;" v-model="dataForm.checkerType" allow-clear allow-search
                        @search="searchHandler($event, 4)" @focus="selectAwait(4)">
                        <a-option v-for="item in pageData.sampleTypeList" :key="item.id" :value="item.duplicateType">{{
                            item.duplicateType }}</a-option>
                    </a-select>
                </a-form-item>
            </a-col>
        </a-row>
        <a-row :gutter="20" justify="space-between">
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="复样员" field="checker" :rules="[{ required: true, message: '复样员必填' }]"
                    :validate-trigger="['change', 'blur']">
                    <!-- <a-input class="aInput" v-model="dataForm.checker" /> -->
                    <a-select popup-container="html"  style="width: 270px;" v-model="dataForm.checker" allow-clear allow-search
                        @search="searchHandler($event, 2)" @focus="selectAwait(2)">
                        <a-option v-for="item in pageData.employeeList" :key="item.id" :value="item.name">{{
                            item.name }}</a-option>
                    </a-select>
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="复办中时间">
                    <a-input class="aInput" v-model="dataForm.handleIn" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="复办OK时间">
                    <a-date-picker  popup-container="html"  class="aInput" v-model="dataForm.handleOk" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="复办时间">
                    <a-date-picker  popup-container="html"  class="aInput"  v-model="dataForm.handleDate" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="复办原因">
                    <a-input class="aInput" v-model="dataForm.handleRemark" />
                </a-form-item>
            </a-col>
        </a-row>
        <a-row :gutter="20" justify="space-between">
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="复T中时间">
                    <a-date-picker  popup-container="html"  class="aInput" v-model="dataForm.repeatedTIn" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="复TOK时间">
                    <a-date-picker  popup-container="html"  class="aInput" v-model="dataForm.repeatedTOk" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="复T时间">
                    <a-input class="aInput" v-model="dataForm.repeatedTDate" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="复T原因">
                    <a-input class="aInput" v-model="dataForm.repeatedTRemark" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="套棉中时间">
                    <a-date-picker  popup-container="html"  class="aInput" v-model="dataForm.harnessIn" />
                </a-form-item>
            </a-col>
        </a-row>
        <a-row :gutter="20" justify="space-between">
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="套棉OK时间">
                    <a-date-picker  popup-container="html"  class="aInput" v-model="dataForm.harnessOk" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="套棉时间">
                    <a-input class="aInput" v-model="dataForm.harnessDate" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="套棉原因">
                    <a-input class="aInput" v-model="dataForm.harnessRemark" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="加色中时间">
                    <a-date-picker  popup-container="html"  class="aInput" v-model="dataForm.colourIn" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="加色OK时间">
                    <a-date-picker  popup-container="html"  class="aInput" v-model="dataForm.colourOk" />
                </a-form-item>
            </a-col>
        </a-row>
        <a-row :gutter="20" justify="space-between">
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="加色时间">
                    <a-input class="aInput" v-model="dataForm.colourDate" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="加色原因">
                    <a-input class="aInput" v-model="dataForm.colourRemark" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="放样中时间">
                    <a-date-picker  popup-container="html"  class="aInput" v-model="dataForm.releaseIn" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="放样OK时间">
                    <a-date-picker  popup-container="html"  class="aInput" v-model="dataForm.releaseOk" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="放样时间">
                    <a-input class="aInput" v-model="dataForm.releaseDate" />
                </a-form-item>
            </a-col>
        </a-row>
        <a-row :gutter="20">
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="工艺类型">
                    <a-input class="aInput" v-model="dataForm.craftType" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="放样原因">
                    <a-input class="aInput" v-model="dataForm.releaseRemark" />
                </a-form-item>
            </a-col>
            <a-col :xxl="4" :xl="8" :lg="8" :md="12" :xs="24">
                <a-form-item label="备注">
                    <a-input class="aInput" v-model="dataForm.remark" />
                </a-form-item>
            </a-col>
        </a-row>
    </a-form>
</template>

<script lang="ts">
import { reactive, ref } from 'vue'
import { DuplicateDetail } from '@/interface/dupSampleReg';
import { FormInstance } from '@arco-design/web-vue';
import emitter from "@/hooks/useEventBus";
export default {
    name: 'DupSampleDetail',
    props: {
        pageData: {
            type: Object,
            default: () => ({}),
            require: true,
        },
        dataForm: {
            type: Object,
            default: () => ({}),
            require: true,
        },
    },
    setup(props, { emit }) {
        const pageData:any = ref(props.pageData);
        const dataForm = reactive<DuplicateDetail>({
            id: null,
            duplicateSampleRegisterID: null,
            columnDate: '',
            craftType: '',
            planAdd: '',
            roamCard: '',
            worksho: '',
            speedType: 0,
            customerName: '',
            temporarys: '',
            colourNumber: '',
            colorConfirmation: '',
            clothNumber: '',
            tradeName: '',
            yarnCount: '',
            yarnNumber: '',
            grayCode: '',
            grayName: '',
            coloringMatch: '',
            duplicateSample: 0,
            urgent: 0,
            duplicateExplain: '',
            checkerType: '',
            checker: '',
            handleDate: '',
            handleIn: '',
            handleOk: '',
            handleRemark: '',
            repeatedTDate: '',
            repeatedTIn: "",
            repeatedTOk: '',
            repeatedTRemark: '',
            harnessDate: '',
            harnessIn: '',
            harnessOk: '',
            harnessRemark: '',
            colourDate: '',
            colourIn: '',
            colourOk: '',
            colourRemark: '',
            releaseDate: '',
            releaseIn: '',
            releaseOk: '',
            releaseRemark: '',
            remark: '',
            deleteState: 0
        });
        if (props.dataForm) {
            for (var key in props.dataForm) {
                dataForm[key] = props.dataForm[key]
            };
        };
        const formRef = ref<FormInstance>();
        emitter.on('saveHandler', (callBack: any) => {
            formRef.value?.validate().then((err) => {
                if (!err) {
                    // expose({  });
                    callBack(true, dataForm)
                } else {
                    callBack(false)
                }
            });
        });

        const searchHandler = (event: any, index: number) => {
            emit('search-handler', event, index)
        }
        const selectAwait = (index: number) => {
            emit('select-await', index)
        };


        const circulRef = ref();
        const changeCircul = () => {
            setTimeout(() => {
                pageData.value.circulDropList.forEach((v:any) => {
                     if(v.flowCardCode === circulRef.value.modelValue){
                        dataForm.customerName = v.customName;
                        dataForm.planAdd = v.planOrderCode;
                        dataForm.clothNumber = v.clothCode;
                        dataForm.tradeName = v.productName;
                        dataForm.grayCode = v.greyCode;
                        dataForm.grayName = v.greyName;
                        dataForm.coloringMatch = v.contrastColor;
                     }
                })
            },100)
           
        } 
        return {
            formRef,
            dataForm,
            searchHandler,
            selectAwait,
            changeCircul,
            pageData,
            circulRef
        }

    }
}
</script>

<style scoped>
.aInput {
    background: #fff;
    border: 1px solid #c9cdd3;
}
</style>